<script>
import { Icon, Switch, Col, Row } from 'view-ui-plus';

export default {
    name: "orgnazition",
    data() {
        return {
            columns: [
                {
                    title: "组织名",
                    key: "orgName",
                    sortable: true,
                    tree: true,
                },
                {
                    title: "组织描述",
                    key: "orgDesc",
                    sortable: true,
                },
                {   
                    title: "父组织名",
                    key: "fatherName",
                    sortable: true,
                },
                {
                    title: "action",
                    width: 200,
                    slot: "action"
                }
            ],
            orgData: [], //全部数据
            isTree: false, //是否需要树形展示
            isTreeBtn: false,//树形展示按钮是否可见
            searchData: {
                father_name: "",
                org_name: "",
            }, //父类和子类搜索框
            isShow: false,
            isCreate: false,
            changeData: {}, //需要修改的数据
        };
    },
    methods: {
        handleCreate() {
            this.changeData = { id: -1, orgname: "", orgdesc: "", fatherorg: -1 };
            this.isCreate = true;
            this.isShow = true;
        },
        handleChange(data) {
            this.changeData = data;
            this.isCreate = false;
            this.isShow = true;
        },
        handleDelete(index) {
            this.confirm(() => {
                this.$api.post("asset/org/delete/" + index).then((res) => {
                    this.info(res.msg);
                    this.renew();
                });
            }, "您确认删除吗？</br><p style='color: red'>（可能删除子信息！）<p>");
        },
        handleSubmit() {
            console.log(this.changeData);
            var url = this.changeData.id == -1 ? "asset/org/create" : "asset/org/update";
            this.confirm(() => {
                if (this.changeData.id != -1 && this.changeData.fatherorg == this.changeData.id)
                    this.info("上级组织不能是自身");
                else {
                    this.$api.post(url, this.changeData).then((res) => {
                        this.info(res.msg);
                        this.renew();
                    });
                }
            });
        },
        handleChangeTree() {
            if(this.isTree) this.orgData=this.dealDataTree(this.orgData);
            else this.renew();
        },
        handleInputChange() {
            if (this.searchData.father_name == "" && this.searchData.org_name == "") 
                this.isTreeBtn = false;
            else {
                this.isTreeBtn = true;
                this.isTree = false;
            }
        },
        confirm(func) {
            this.$Modal.confirm({
                title: "确认框",
                onOk: func,
            });
        },
        confirm(func, msg) {
            this.$Modal.confirm({
                title: "确认框",
                content: msg,
                onOk: func,
            });
        },
        renew() {
            this.$api.get("asset/org/list", this.searchData).then((res) => {
                var data = res.data.data;
                //当无父类组织名和组织名时，可以启用树状显示
                if (this.isTree && this.searchData.father_name == "" && this.searchData.org_name == "")
                    data = this.dealDataTree(data);
                this.orgData = data;
                console.log("data:");
                console.log(this.orgData);
            });
        },
        dealDataTree(data) {
            console.log(data);
            var result = {
                id: null,
                children:[]
            };//根节点
            var search_list = [result];
            var isUsed = new Array(data.length).fill(true);
            data.map((item) => {
                item.selected = false;
                item.checked = false;
                item.value = item.id;
                item.title = item.orgName;
            });
            console.log(data);
            while (search_list.length != 0) {
                var set = search_list.pop();
                set.expand = true;
                set._showChildren = true;
                for (var i in data) {
                    if (isUsed[i] && data[i].fatherId == set.id) {
                        if (!('children' in set))
                            set.children = [];
                        set.children.push(data[i]);
                        search_list.push(data[i]);
                        isUsed[i] = false;
                    }
                }
            }
            console.log(result.children);
            return result.children;
        },
        info(message) {
            this.$Notice.info({
                title: "提示",
                desc: message,
            });
        },
    },
    created() {
        this.renew();
    },
    components: { Icon, Switch, Col, Row }
}
</script>
<template>
    <div class="main_container">
        <Modal v-model="isShow" :title="isCreate ? '创建组织' : '修改组织'" @on-ok="handleSubmit" draggable>
            <Form :label-width="90">
                <FormItem label="组织名">
                    <Input v-model="changeData.orgName" width="800" />
                </FormItem>
                <FormItem label="组织描述">
                    <Input v-model="changeData.orgDesc" width="800" />
                </FormItem>
                <FormItem label="父级组织">
                    <TreeSelect v-model="changeData.fatherId" :data="orgData"></TreeSelect>
                </FormItem>
            </Form>
        </Modal>
        <Row :gutter="8">
            <Col span="6">
            <div class="tree_container">
                <p style="width: 130px;float: left;">是否需要树形展示： </p>
                <Switch v-model="isTree" style="float: left;" @on-change="handleChangeTree()" :disabled="isTreeBtn">
                </Switch>
            </div>
            </Col>
            <Col span="6" offset="5">
            <Space>
                父组织：
                <Input v-model="this.searchData.father_name" @on-change="handleInputChange()" />
            </Space>
            </Col>
            <Col span="7">
            <Space>
                组织名:
                <Input v-model="this.searchData.org_name" @on-blur="handleInputChange()" />
                <Button type="primary" icon="ios-search" shape="circle" @click="renew()"></Button>
            </Space>
            </Col>
        </Row>
        <Row>
            <Button type="success" class="add_btn" @click="handleCreate()" size="large">添加资产</Button>
        </Row>
        <div class="table_container">
            <Table highlight-row border :columns="columns" :data="orgData" width="1115" height="400" row-key="id">
                <template #action="{ row }">
                    <Space>
                        <Button type="info" @click="handleChange(row)">修改</Button>
                        <Button type="error" @click="handleDelete(row.id)">删除</Button>
                    </Space>
                </template>
            </Table>
        </div>
    </div>
</template>
<style scoped>
.main_container {
    width: 90%;
    height: 90%;
    border-radius: 10px;
    padding: 10px;
    border: solid;
    margin: auto;
    margin-top: 20px;
}

.table_container {
    width: 100%;
    height: 90%;
    /* overflow: scroll; */
}

.tree_container {
    margin: auto auto;
    height: 40px;
    width: 240px;
    padding: 6px 24px;
    border: solid;
    border-radius: 25px;
}

.add_btn {
    margin: 10px auto;
    margin-left: 80%;
    width: 160px;
}

.select_Option {
    color: rgb(169, 103, 239)
}
</style>